$(function(){
    var $searchBar = $('#searchBar'),//整体搜索部分
        $searchResult = $('#searchResult'),//搜索结果部分
        $searchText = $('#searchText'),//搜索展示框
        $searchInput = $('#searchInput'),//搜索输入框
        $searchClear = $('#searchClear'),//搜索输入框清除按钮
        $searchCancel = $('#searchCancel');//搜索输入框取消按钮

    function hideSearchResult(){//隐藏结果，清空输入
        $searchResult.hide();
        $searchInput.val('');
    }
    function cancelSearch(){ //移除输入框获取类名
        hideSearchResult();
        $searchBar.removeClass('search-bar_focusing');
        $searchText.show();
    }

    $searchText.on('click', function(){
        $searchBar.addClass('search-bar_focusing');//效果:将输入框显示，展示框隐藏
        $searchInput.focus();//输入框获取焦点
    });
    $searchInput
        .on('blur', function () {//失去焦点，如果没有输入就还原展示框
            if(!this.value.length) cancelSearch();
        })
        .on('input', function(){//输入改变
            if(this.value.length) {//检测到输入
                $searchResult.show();//显示输入结果
            } else {
                $searchResult.hide();
            }
        })
    ;
    $searchClear.on('click', function(){//输入框清除按钮点击
        hideSearchResult();//隐藏结果
        $searchInput.focus();//输入框获取焦点
    });
    $searchCancel.on('click', function(){//取消搜索按钮点击事件
        cancelSearch();
        $searchInput.blur();
    });
});